<template>
	<n-modal
		class="base-popup-small text-t-1"
		:show="appStore.casinoDetailShow"
		:on-mask-click="onClose"
		:class="
			isDesktop ? 'w-[500px] rounded' : 'fixed bottom-0 w-full max-h-[calc(100%-60px)] rounded-t-lg'
		">
		<div class="bg-bg-1 md:w-[500px] w-full rounded-lg">
			<div class="flex items-center justify-between p-3">
				<div class="flex items-center">
					<base-icon name="ticket" size="24" class="mr-1"></base-icon>
					<div class="text-lg">{{ $t('transactionType.bet') }}</div>
				</div>
				<base-icon name="close" size="24" @click="onClose" class="cursor-pointer"></base-icon>
			</div>
			<div class="px-[36px] pb-[39px] pt-[10px]">
				<div class="flex mb-[10px]">
					<base-image
						class="w-[108px] h-[144px] rounded-md mr-4"
						:src="data?.game.gameIcon"
						type="network" />
					<div class="flex-1 pt-[8px]">
						<div class="flex justify-between">
							<div class="mb-[10px]">
								<div>{{ data?.game.gameName }}</div>
								<div class="text-primary">{{ data?.game.developerName }}</div>
							</div>
							<router-link :to="handleRouterLink" class="outline-none text-t-1">
								<base-icon name="expandarrow" size="36" />
							</router-link>
						</div>

						<div class="h-[1px] w-full bg-bg-3 mb-[8px]"></div>
						<div>
							<div class="mb-1"><up-user :value="data.user"></up-user></div>
							<div class="flex justify-between text-sm">
								<div class="text-t-3">ID {{ data.orderId }}</div>
								<div>
									<base-copy
										size="16"
										:value="`casino:${data.orderId}`"
										successMsg="tip.copySuccessShareInChat"
										class="mr-[2px]" />
									<base-share
										:value="shareLink"
										successMsg="tip.copySuccessShareInLink"
										size="16" />
								</div>
							</div>
							<div class="text-t-3 text-sm">{{ format(data.createAt, 'p dd-MM-yyyy') }}</div>
						</div>
					</div>
				</div>
				<img class="mb-[10px] w-full" src="@/assets/img/divider-2up.svg" />
				<div class="flex bg-bg-3 py-[20px] rounded mb-[74px]">
					<div class="flex-1 text-center">
						<p class="text-t-3 mb-[10px]">{{ $t('app.rank.betAmount') }}</p>
						<up-currency
							:value="data.betAmount"
							:hoverValue="data.betAmount"
							:currency="data.currency"></up-currency>
					</div>
					<div class="flex-1 text-center">
						<p class="text-t-3 mb-[10px]">{{ $t('app.rank.odds') }}</p>
						<up-multiplier :value="data"></up-multiplier>
					</div>
					<div class="flex-1 text-center">
						<p class="text-t-3 mb-[10px]">{{ $t('app.rank.payout') }}</p>
						<up-currency
							:value="data.payoutAmount"
							:hoverValue="data.payoutAmount"
							:currency="data.currency"></up-currency>
					</div>
				</div>
				<router-link :to="handleRouterLink" class="outline-none no-underline">
					<base-button type="primary">
						<base-icon name="expandarrow" size="20" class="mr-1" />
						{{ $t('app.play') }}{{ data.game.gameName }}
					</base-button>
				</router-link>
			</div>
		</div>
	</n-modal>
</template>
<script setup lang="ts">
import { NModal } from 'naive-ui'
import { useAppStore } from '@/store'
import { UpUser, UpCurrency, UpMultiplier } from '@/components/up'
import { BaseIcon, BaseImage, BaseButton, BaseCopy, BaseShare } from '@/components/base'
import { computed, onUnmounted } from 'vue'
import { format } from 'date-fns'
import { isDesktop } from '@/hooks'
import { genOriginalRoute } from '@/components/slots/utils.ts'

const appStore = useAppStore()
const onClose = () => {
	appStore.setCasinoDetailVisible(false, null)
}
const data = computed(() => appStore.casinoDetailData as any)
const handleRouterLink = computed(() => {
	const item = data.value.game
	if (item.category === 3) {
		//original
		return genOriginalRoute(item)
	} else {
		return { name: 'casinoDetail', params: { id: item.slug || item.id, locale: appStore.lang } }
	}
})
const shareLink = computed(() => {
	return `${location.host}/${appStore.lang}/casino/home?id=${data.value.orderId}&modal=bet`
})

onUnmounted(() => {
	onClose()
})
</script>
